<template>
    <Upload
        :action="action"
        :show-upload-list="false"
        type="drag"
        :accept="accept"
        :format="format"
        :max-size="maxSize"
        :on-format-error="onFormatError"
        :on-exceeded-size="onExceededSize"
        :on-success="onSuccess"
        :headers="headers"
    >
        <div class="file-list-upload">
            <div class="file-list-tips">
                <slot>
                    <p>将文件拖至此处</p>
                    <p>支持格式word,PDF,excel；单个文件大小20M以内</p>
                </slot>
            </div>
            <div class="file-list-content" @click="stopClickEvent">
                <div class="file-item" v-for="(item, i) in files" :key="item.file">
                    <Icon type="md-document" color="#1177E8" :size="60" />
                    <div class="file-name">
                        {{item.file | formatFile}}
                    </div>
                    <div class="file-del" @click="handleDel(i)">删除</div>
                </div>
            </div>
        </div>
    </Upload>
</template>
<script>
import { getToken } from '@/libs/util'
import { downloadURL } from '@/config/downloadUrl.js'
export default {
    props: {
        headers: {
            type: Object,
            default: () => {
                return {
                    Authorization: getToken()
                }
            }
        },
        action: {
            type: String,
            default: downloadURL + '/fileManage/upload'
        },
        value: {
            type: Array,
            default: () => []
        },
        accept: {
            type: String,
            default: ''
        },
        format: {
            type: Array,
            default: () => []
        },
        maxSize: {
            type: Number
        }
    },
    data () {
        return {
            files: []
        }
    },
    watch: {
        value: {
            handler: function (v) {
                this.files = v.slice()
            },
            deep: true,
            immediate: true
        }
    },
    mounted () {
        console.log(downloadURL)
        this.$nextTick(() => {
            console.log(this)
        })
    },
    methods: {
        stopClickEvent (e) {
            const target = e.target
            if (target.className !== 'file-list-content') {
                window.event ? window.event.cancelBubble = true : e.stopPropagation()
            }
        },
        handleDel (i) {
            this.files.splice(i, 1)
            this.$emit('input', this.files.slice())
        },
        onFormatError () {
            this.$Message.error('文件格式有误')
        },
        onExceededSize () {
            this.$Message.error('文件大小超出可上传范围')
        },
        onSuccess (response) {
            if (response.code === '0000') {
                const data = response.data || +new Date()
                if (data) {
                    this.files.push({
                        file: data
                    })
                    this.$emit('input', this.files.slice())
                }
            } else {
                this.$Message.error(response.msg)
            }
        }
    }
}
</script>
<style lang="less" scoped>
.file-list-upload {
    position: relative;
    width: 100%;
    min-height: 200px;
    .file-list-tips {
        margin: auto;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .file-list-content {
        padding: 0 10px 10px 0;
        text-align: left;
    }
    .file-item {
        display: inline-block;
        width: 100px;
        line-height: 22px;
        margin: 10px 0 0 10px ;
        text-align: center;
    }
    .file-name {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .file-del {
        width: 60px;
        margin: 0 auto;
        color: #1177e8;
    }
}
</style>
